<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #move{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            margin-top: 10px;
            position: relative;
            left: 0;
            top: 0;
       }
    </style>
</head>
<body>
   
    <button id="hide">hide</button>
    <button id="show">show</button>
    <button id="toggle">toggle</button>
    <button id="fadeIn">fadeIn</button>
    <button id="fadeOut">fadeOut</button>
    <button id="fadeToggle">fadeToggle</button>
    <button id="slideDown">放下</button>
    <button id="slideUp">收起</button>
    <button id="slideToggle">slideToggle</button>
    <div id="box"></div>
    <button id="animate">animate</button>
    <button id="stop">stop</button>
    <div id="move">aaaaaa</div>

</body>
<script>
    //隐藏
    //.hide()
    $("#hide").click(function(){
        // $("#box").hide(2000)//2000毫秒
        $("#box").hide(2000,function(){//回调函数
            console.log('隐藏完成');
        })
    })
    //显示
    //.show()
    $("#show").click(function(){
        // $("#box").show(5000) 
        $("#box").show(2000,function(){
            console.log('显示完成'); 
        })
    })
    //来切换ide（）和show（）
    //.toggle()
    $("#toggle").click(function(){
        $("#box").toggle(1000,function(){
            console.log('切换完成');
        }) 
    })
    //
    //.fadeIn()
    $("#fadeIn").click(function(){
        $("#box").fadeIn(1000,function(){
            console.log('淡入完成');
        }) 
    })
    //
    //.fadeOut()
    $("#fadeOut").click(function(){
        $("#box").fadeOut(1000,function(){
            console.log('淡出完成');
        }) 
    })
    //
    //.fadeToggle()
    $("#fadeToggle").click(function(){
        $("#box").fadeToggle(1000,function(){
            console.log('淡入淡出切换完成');
        })
    })
    //Out与In放在一块
    $("#fadeOut").click(function(){
        $("#box").fadeOut(1000,function(){
            $("#box").fadeIn(1000,function(){
            console.log('淡入完成');
        }) 
        }) 
    })
    //滑动
    //.slideDown(  )
    //.slideUp()
    //.slideToggle()
    $("#slideDown").click(function(){
        $("#box").slideDown(1000,function(){
            console.log('放下完成');
        })
    })
    $("#slideUp").click(function(){
        $("#box").slideUp(1000,function(){
            console.log('收起完成');
        })
    })
    $("#slideToggle").click(function(){
        $("#box").slideToggle(1000,function(){
            console.log('放下收起切换完成');
        }) 
    })










    //自定义动画  ，颜色不生效，想要颜色生效，需要用到颜色插件
    //.animate()
    $("#animate").click(function(){
        $("#move").animate({
            left: 300,
            top: 50,
            width: 300, 
            height: 300,
            opacity: 0.5,
            fontSize: 60,
            color: 'red'
        },5000,function(){
            console.log('动画完成'); 
        } 
        )
    })
    //stop()
    $("#stop").click(function(){
        $("#move").stop() 
    })
</script>
</html>